{% extends 'baykeshop/base_site.html' %}

{% load static shop_tags %}

{% block title %}{{ spu.title }}{% endblock %}

{% block extrastyle %}
    <script src="{% static 'baykeshop/js/axios.min.js' %}"></script>
    <script src="{% static 'baykeshop/js/request.js' %}"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .is-active .al img {
            filter: grayscale(0%);
           /* border: solid 1px rebeccapurple;*/
        }
        .carousel{border: solid 1px rgba(224, 224, 224, 0.232);}
        .carousel-indicator{
            align-items: center;
            border-top: solid 1px rgba(224, 224, 224, 0.232);
            padding: 0;
            background-color: #fff;
        }
        .al img {
            filter: grayscale(100%);
        }
        
    </style>
{% endblock %}
    
{% block breadcrumb %}
<div class="container">
  <nav class="breadcrumb is-marginless mt-3 mb-3 is-small" aria-label="breadcrumbs">
    <ul>
      <li><a href="{% url 'baykeshop:home' %}">首页</a></li>
      <li><a href="{% url 'baykeshop:cate_detail' spu.category.first.parent.id %}">{{ spu.category.first.parent.name }}</a></li>
      <li><a href="{% url 'baykeshop:cate_detail' spu.category.first.id %}">{{ spu.category.first.name }}</a></li>
      <li class="is-active"><a href="#" aria-current="page">{{ spu.title }}</a></li>
    </ul>
  </nav>
</div>
{% endblock %}


{% block content %}
{{ skus|json_script:"skus-data" }}
{{ specs|json_script:"specs-data" }}
{{ current_ops|json_script:"current-ops-data" }}
<div class="container" id="spuDetail" v-cloak>
    <div class="columns">
        <div class="column is-3">
            <div class="box1 is-radiusless is-shadowless">
                <b-carousel :indicator-inside="false">
                    <b-carousel-item v-for="(item, i) in goods.banners" :key="i">
                        <b-image class="image" ratio="1by1" :src="getImgUrl(item)"></b-image>
                    </b-carousel-item>
                    <template #indicators="props">
                        <b-image class="al image" :src="getImgUrl(goods.banners[props.i])"></b-image>
                    </template>
                </b-carousel>
            </div>
        </div>
        <div class="column">
            <h1 class="is-size-5 has-text-justified has-text-weight-bold mb-2">{{ spu.title }}</h1>
            <div class="box is-marginless is-radiusless has-background-primary-dark has-text-white-ter">
                <div class="is-flex is-justify-content-space-between is-align-items-center">
                    <div>
                        <span class=" is-size-7"> 原价：¥ <del>{$ goods.org_price $}</del></span>
                        <h1 class=" is-size-4">¥ {$ goods.price $}</h1>
                    </div>
                    <div class=" has-text-centered">
                        {$ goods.sales $}
                        <h1>销量</h1>
                    </div>
                </div>
            </div>

            {% comment %} 规格 {% endcomment %}
            <div class="box is-radiusless is-shadowless is-marginless" v-if="currentOps.length > 0" >
                <div class="is-flex is-flex-direction-column is-justify-content-space-around" style="min-height:80px">
                    <div class="is-flex" v-for="spec, index in specs" :key="index">
                        <span class="is-size-7 mr-3">{$ spec.spec $}:</span>
                        <b-radio-button v-for="op, i in spec.options" :key="op"
                            @click.native=""
                            v-model="currentOps[index]"
                            :native-value="op"
                            size="is-small"
                            class="mr-2 is-radiusless is-shadowless"
                            type="is-danger is-light is-outlined">
                            <span>{$ op $}</span>
                        </b-radio-button>
                    </div>
                </div> 
            </div>

            <!-- 数量 -->
            <div class="box is-flex is-align-items-center is-radiusless is-shadowless is-marginless">
                <div class="is-size-7 mr-3">数量:</div>
                <div>
                    <b-field>
                        <b-numberinput 
                            controls-position="compact" 
                            min="1" 
                            :max="stock" 
                            v-model="num"
                            size="is-small"
                            :editable="false">
                        </b-numberinput> 
                    </b-field>
                </div>
                <div class="ml-3">(库存{$ stock $})</div>
            </div>

            <!-- 操作 -->
            <div class="buttons box is-radiusless">
                <b-button 
                    type="is-primary" 
                    @click="addCart" 
                    :disabled="stock ? false : true">加入购物车
                </b-button>
                <b-button 
                    type="is-primary" 
                    :disabled="stock ? false : true" 
                    @click="cashRegister"
                    outlined>
                    立即购买
                </b-button>
            </div>

            {% comment %} 商品详情及评论 {% endcomment %}
            <div class="box is-radiusless">
                <b-tabs class="block" @input="tabsChange" v-model="activeTab">
                    <b-tab-item label="商品详情" value="content">
                        <div class="content">{{ spu.content|safe }}</div>
                    </b-tab-item>
                    <b-tab-item label="商品评价" value="comment">
                        <div class="is-flex is-justify-content-space-between p-2">
                            <div class="">满意度：{{ like_rate }}%</div>
                            <div class="is-flex is-align-items-center">
                                <span> 评分：</span>
                                <b-rate 
                                    :value="{{ score }}" 
                                    disabled 
                                    custom-text="{{ score }}分">
                                </b-rate>
                            </div>
                        </div>
                        <div class=" dropdown-divider"></div>

                        {% for comment in page_comments %}
                            <article class="media">
                                <figure class="media-left">
                                    <p class="image is-32x32">
                                        <img class="is-rounded" src="{{ comment.owner.baykeuserinfo.avatar.url }}">
                                    </p>
                                </figure>
                                <div class="media-content">
                                    <p>
                                        {{ comment.owner.username }}
                                        <b-rate size="is-small" :value="{{ comment.comment_choices }}" disabled custom-text="{{ comment.comment_choices }}分"></b-rate>
                                    </p>
                                    <p class=" is-size-7">{{ comment.add_date|timesince }}前</p>
                                    <p class=" has-text-grey-light">{{ comment }}</p>
                                </div>
                            </article>
                        {% empty %}
                        <p class=" has-text-centered has-text-danger mt-6">还没有任何评价内容哦！</p>
                        {% endfor %}

                        {% if page_comments %}
                        <nav class="pagination is-centered1 is-small" role="navigation" aria-label="pagination">
                            {% if page_comments.has_previous %}
                            <a class="pagination-previous" href="?page={{ page_comments.previous_page_number }}&tabsActive=comment">Previous</a>
                            {% endif %}
                            {% if page_comments.has_next %}
                            <a class="pagination-next" href="?page={{ page_comments.next_page_number }}&tabsActive=comment">Next page</a>
                            {% endif %}
                            <ul class="pagination-list">
                                {% for p in page_obj.paginator.get_elided_page_range %}
                                    {% if p != '...' %}
                                    <li><a href="?page={{ p }}&tabsActive=comment" class="pagination-link {% if page_comments.number == p %} is-current {% endif %}" {% if page_comments.number == p %}aria-current="page"{% endif %} aria-label="Goto page {{ p }}">{{ p }}</a></li>
                                    {% else %}
                                    <li><span class="pagination-ellipsis">&hellip;</span></li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </nav>
                        {% endif %}

                    </b-tab-item>
                </b-tabs>
            </div>
        </div>
        <div class="column is-2">
            <h1 class="has-text-centered has-background-white pt-3 is-size-6 pb-3 has-text-weight-bold">热销排行</h1>
            <div class=" dropdown-divider is-marginless"></div>
            {% for spu in hot_spus %}
            <div class="has-background-white">
                {% spu_box spu %}
            </div>
            <div class="dropdown-divider"></div>
            {% endfor %}
                
        </div>
    </div>
</div>
{% endblock %}

{% block vue %}
    <script>
        var skus = JSON.parse(document.getElementById('skus-data').textContent);
        var specs = JSON.parse(document.getElementById('specs-data').textContent);
        var currentOps = JSON.parse(document.getElementById('current-ops-data').textContent);
        var spuDetail = new Vue({
            el: '#spuDetail',
            delimiters: ['{$', '$}'],
            data:{
                skus:skus,
                specs:specs,
                currentOps: currentOps,
                goods: null,
                num: 1,
                isDisabled: false,
                stock:0,

                activeTab: '{{ tabs_active }}'
            },
            created(){
                this.goods = this.currentOps.length > 0 ? this.skus[this.currentOps.join(',')] : this.skus[this.currentOps]
                this.stock = this.goods.stock
            },
            methods: {
                getImgUrl(value) {
                    return `${value}`
                },
                // 加入购物车
                addCart(){
                    const sendData = new FormData()
                    sendData.append('sku', this.goods.sku_id)
                    sendData.append('num', this.num)
                    request({
                        method: 'post',
                        url: '{% url "baykeshop:add_cart" %}',
                        headers: {'Accept': 'application/json'},
                        data: sendData
                    }).then(res => {
                        if (res.data.code == 'ok') {
                            navbar.toastMessage('is-success', res.data.message)
                            location.reload()
                        }else{
                            navbar.toastMessage('is-danger', res.data.message)
                        }
                    })
                },

                // 立即购买
                cashRegister(){
                    location.href = `{% url 'baykeshop:cash_register' %}?skuID=${this.goods.sku_id}&num=${this.num}`
                },

                // tabs
                tabsChange(value){
                    location.href = `{{ request.path }}?tabsActive=${value}`
                }
            },
            watch:{
                currentOps:{
                    handler: function(val, oldval){
                        let strVal = val.join();
                        goods = this.skus[strVal]
                        if (goods) {
                            this.isDisabled = false
                            this.stock = goods.stock
                            this.goods = {
                                'sku_id': this.skus[strVal]['sku_id'],
                                'price': goods.price,
                                'org_price': goods.org_price,
                                'stock': this.stock,
                                'sales': goods.sales,
                                'cover_pic': goods.cover_pic,
                                'banners': goods.banners
                            }
                            console.log(this.goods)
                        }else if (goods == undefined) {
                            this.stock = 0
                            this.isDisabled = true
                        }
                    },
                    deep: true,
                    
                }
            }
        })
    </script>
{% endblock %}
    
    
    